<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>点评系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css">

    <link href="./css/shop-list.css" rel="stylesheet">
    <link href="./css/main.css" rel="stylesheet">
    <link href="./imgs/icons/山工点评.ico" rel="icon" type="image/x-ico">

    <style type="text/css">

    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
        <div class="header-title">{{typeName}}</div>
        <div class="header-search">
            <i class="el-icon-search"></i>
        </div>
    </div>
    <div class="sort-bar">
        <div class="sort-item">
            <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        {{typeName}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="t in types" :key="t.id" :command="t">
                        {{t.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="sort-item" @click="sortAndQuery('distance')">
            距离 <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <div class="sort-item" @click="sortAndQuery('comments')">
            人气 <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <div class="sort-item" @click="sortAndQuery('score')">
            评分 <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
    </div>
    <div class="shop-list" @scroll="onScroll">
        <div class="shop-box" v-for="s in shops" :key="s.id" @click="toDetail(s.id)">
            <div class="shop-img"><img :src="s.images" alt=""></div>
            <div class="shop-info">
                <div class="shop-title shop-item">{{s.name}}</div>
                <div class="shop-rate shop-item">
                    <el-rate
                            disabled v-model="s.score/10"
                            text-color="#3a8ee6"
                            show-score
                    ></el-rate>
                    <span>{{s.comments}}条</span>
                </div>
                <div class="shop-area shop-item">
                    <span>{{s.area}}</span>
                    <span v-if="s.distance">{{s.distance < 1000 ? s.distance.toFixed(1) + 'm' : (s.distance / 1000).toFixed(1) + 'km'}}</span>
                </div>
                <div class="shop-avg shop-item">￥{{s.avgPrice}}/人</div>
                <div class="shop-address shop-item">
                    <i class="el-icon-map-location"></i>
                    <span>{{s.address}}</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script>

    const app = new Vue({
        el: "#app",
        data: {
            util,
            isReachBottom: false,
            types: [], // 类型列表
            shops: [], // 商店列表
            typeName: "",
            params: {
                typeId: 0,
                current: 1,
                x: null,
                y: null,
                sortBy: "", // 当前排序方式，默认为按距离排序
            },


        },
        created() {
            // 获取参数
            this.params.typeId = util.getUrlParam("type");
            this.typeName = util.getUrlParam("name");
            // 查询类型
            this.queryTypes();
            // 查询商店
            // this.queryShops();
            this.sortAndQuery(this.sortBy);
        },
        methods: {
            queryTypes() {
                axios.get("/shop-type/list")
                    .then(({data}) => {
                        this.types = data;
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message.error(err)
                    })
            },
            queryShops() {
                this.params.current = 1;
                axios.get("/shop/of/type", {
                    params: this.params
                })
                    .then(({data}) => {
                        if (!data) {
                            return
                            console.log(data)
                        }
                        data.forEach(s => s.images = s.images.split(',')[0]);
                        this.shops = this.shops.concat(data);
                        console.log(data)
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message.error(err)
                    })
            },
            handleCommand(t) {
                location.href = "/shop-list.html?type=" + t.id + "&name=" + t.name;
            },
            // sortAndQuery(sortBy) {
            //   if(sortBy==='distance'){
            //     // 如果没有typeId参数，则需要获取当前位置坐标并显示所有商店
            //     navigator.geolocation.getCurrentPosition((position) => {
            //       this.params.x = position.coords.longitude;
            //       this.params.y = position.coords.latitude;
            //   })
            //   }else {
            //     this.params.sortBy = sortBy;
            //   }
            //   this.queryShops();
            // },
            sortAndQuery(sortBy) {
                this.shops = [];
                this.params.current = 1;
                if (sortBy === 'distance') {
                    // 如果排序方式为距离，则获取当前用户地址的经度和纬度
                    this.shops = [];
                    this.params.sortBy = "";
                    this.params.x = 120.149993;
                    this.params.y = 30.334229;
                  // 调用queryShops方法查询商店
                    this.queryShops();
                } else {
                    this.shops = [];
                    this.params.x = null;
                    this.params.y = null;
                    this.params.current = 1;
                    this.params.sortBy = sortBy;
                    this.queryShops();
                }
            },
            goBack() {
                history.back();
            },
            toDetail(id) {
                location.href = "/shop-detail.html?id=" + id
            },
            onScroll(e) {
                let scrollTop = e.target.scrollTop;
                let offsetHeight = e.target.offsetHeight;
                let scrollHeight = e.target.scrollHeight;
                if (scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom) {
                    this.isReachBottom = true
                    console.log("触底")
                    this.params.current++
                    console.log("current" + this.current)
                    if (this.current <= this.totalPages) {
                        this.queryShops(this.params.current, 5);
                    }

                } else {
                    this.isReachBottom = false
                }
            },
        }
    })
</script>
</body>
</html>